<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <!--The viewport meta tag is used to improve the presentation and behavior
        of the samples on iOS devices-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>heatmap.js ArcGIS JavaScript API Heatmap Layer</title>
        <link rel="shortcut icon"
        type="image/png" href="http://www.patrick-wied.at/img/favicon.png" />
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
		<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
        <style>
            body, html {
                margin:0;
                padding:0;
                font-family:Arial;
            }
            h1 {
                margin-bottom:10px;
            }
            h2 {
                margin-top:0;
            }
            #main {
                position:relative;
                width:1020px;
                padding:20px;
                margin:auto;
            }
            #heatmapArea {
                position:relative;
                float:left;
                width:800px;
                height:600px;
                border:1px dashed black;
            }
            #configArea {
                position:relative;
                float:left;
                width:200px;
                padding:15px;
                padding-top:0;
                padding-right:0;
            }
            .btn {
                margin-top:25px;
                padding:10px 20px 10px 20px;
                -moz-border-radius:15px;
                -o-border-radius:15px;
                -webkit-border-radius:15px;
                border-radius:15px;
                border:2px solid black;
                cursor:pointer;
                color:white;
                background-color:black;
            }
            #map {
                width:800px;
                height:600px;
            }
            #title {
                font-family:arial;
                display:inline-block;
                position:absolute;
                font-weight:bold;
                font-size:21px;
                line-height:28px;
                top:20px;
                right:20px;
                z-index:99;
                background:rgba(255, 255, 255, 0.65);
                padding:10px 20px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                text-shadow:1px 1px 1px #FFFFFF -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
                box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
            }
        </style>
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/dijit/css/Popup.css"
        />
        <script type="text/javascript" src="../../src/heatmap.js"></script>
        <script type="text/javascript" src="../../src/heatmap-arcgis.js"></script>
        <script type="text/javascript">
            dojo.require("esri.map");
            dojo.require("esri.layers.FeatureLayer");

            // Variables
            var map;
            var heatLayer;
            var featureLayer;

            // get the features within the current extent from the feature layer
            function getFeatures() {
                // set up query
                var query = new esri.tasks.Query();
                // only within extent
                query.geometry = map.extent;
                // give me all of them!
                query.where = "1=1";
                // make sure I get them back in my spatial reference
                query.outSpatialReference = map.spatialReference;
                // get em!
                featureLayer.queryFeatures(query, function (featureSet) {
                    var data = [];
                    // if we get results back
                    if (featureSet && featureSet.features && featureSet.features.length > 0) {
                        // set data to features
                        data = featureSet.features;
                    }
                    // set heatmap data
                    heatLayer.setData(data);
                });
            }

            // Init
            function init() {
                // initial extent of map
                var initExtent = new esri.geometry.Extent({
                    xmax: -13624229.32056175,
                    xmin: -13625120.886837104,
                    ymax: 4548374.604660432,
                    ymin: 4547966.144290476,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                // create map
                map = new esri.Map("map", {
                    extent: initExtent,
                    sliderStyle: "small"
                });
                //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);
                // once map is loaded
                dojo.connect(map, 'onLoad', function (theMap) {
                    //resize the map when the browser resizes
                    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                    // create heat layer
                    heatLayer = new HeatmapLayer({
                        /* config: {
                            "useLocalMaximum": true,
                            "radius": 90,
                            "gradient": {
                                0.45: "rgb(000,000,255)",
                                0.55: "rgb(000,255,255)",
                                0.65: "rgb(000,255,000)",
                                0.95: "rgb(255,255,000)",
                                1.00: "rgb(255,000,000)"
                            }
                        }, */
                        "map": map,
                        "domNodeId": "heatLayer",
                        "opacity": 0.85
                    });
                    // add heat layer to map
                    map.addLayer(heatLayer);
                    // resize map
                    map.resize();
                    // create feature layer to get the points from
                    featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
                        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                        visible: false
                    });
                    map.addLayer(featureLayer);
                    // get features from this layer
                    getFeatures();
                    // on map extent change
                    dojo.connect(map, "onExtentChange", function (extent) {
                        // get features
                        getFeatures();
                    });
                    dojo.connect(dojo.byId('tog'), "onclick", function () {
                        if (heatLayer.visible) {
                            heatLayer.hide();
                        } else {
                            heatLayer.show();
                        }
                    });
                    dojo.connect(dojo.byId('tog2'), "onclick", function () {
                        if (featureLayer.visible) {
                            featureLayer.hide();
                        } else {
                            featureLayer.show();
                        }
                    });
                });
            }
            // call init on load of dojo
            dojo.addOnLoad(init);
        </script>
    </head>

    <body class="claro">
        <div id="main">
            	<h1>ArcGIS JavaScript API Heatmap Overlay</h1>
	<a href="http://www.patrick-wied.at/static/heatmapjs/" title="heatmap.js">Back to the project page</a>

            <br
            />
            <br />
            <div id="heatmapArea">
                <div id="heatLayer"></div>
                <div id="title">San Francisco Trees</div>
                <div id="map"></div>
            </div>
            <div id="configArea">
                	<h2>Sidenotes</h2>
This is a demonstration of a canvas heatmap overlay with the <a href="http://help.arcgis.com/en/webapi/javascript/arcgis/"
                target="_blank">ArcGIS API for JavaScript</a>.
                <br />
                <br />View the <a href="http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0"
                target="_blank">Feature layer</a>.
                <div id="tog" class="btn">Toggle HeatmapOverlay</div>
                <div id="tog2" class="btn">Toggle Tree Points</div>
            </div>
            <div style="position:absolute;width:940px;top:750px;text-align:center;"><a href="http://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> by
                <a
                href="http://www.patrick-wied.at" target="_blank">Patrick Wied</a>
            </div>
        </div>
    </body>

</html>